<template>
	<view class="student-grades-card">
		<view class="card-header">
			<text class="card-title">学生成绩情况</text>
			<view class="info-icon">ⓘ</view>
		</view>
		
		<!-- 表格头部 - 全科模式 -->
		<view class="table-header" v-if="selectedSubject === '全科'">
			<view class="header-cell name">姓名</view>
			<view class="header-cell score">分数</view>
			<view class="header-cell grade-rank">年级排名</view>
			<view class="header-cell class-rank">班级排名</view>
			<view class="header-cell pass">过往成绩</view>
			<view class="header-cell actions">操作</view>
		</view>

		<!-- 表格头部 - 单科模式 -->
		<view class="table-header" v-else>
			<view class="header-cell name">姓名</view>
			<view class="header-cell score">分数</view>
			<view class="header-cell grade-rank">年级排名</view>
			<view class="header-cell class-rank">班级排名</view>
			<view class="header-cell actions single-subject">操作</view>
		</view>
		
		<!-- 学生列表 -->
		<view class="student-list">
			<view class="student-row" v-for="student in studentGradesData" :key="student.id">
				<view class="student-cell name">
					<view class="student-avatar">
						<text class="avatar-text">{{ student.avatar || student.name.charAt(0) }}</text>
					</view>
					<text class="student-name">{{ student.name }}</text>
				</view>
				<view class="student-cell score">
					<text class="score-text">{{ student.score }}</text>
				</view>
				<view class="student-cell grade-rank">
					<text class="rank-text">{{ student.gradeRank }}</text>
				</view>
				<view class="student-cell class-rank">
					<text class="rank-text">{{ student.classRank }}</text>
				</view>
				
				<!-- 全科模式：显示过往成绩和成绩单 -->
				<template v-if="selectedSubject === '全科'">
					<view class="student-cell pass">
						<text class="pass-text" @click="handleViewGrades(student)">查看</text>
					</view>
					<view class="student-cell actions">
						<text class="report-btn" @click="handleViewReport(student)">成绩单 ></text>
					</view>
				</template>
				
				<!-- 单科模式：只显示答题卡 -->
				<template v-else>
					<view class="student-cell actions single-subject">
						<text class="answer-sheet-btn" @click="handleViewAnswerSheet(student)">答题卡 ></text>
					</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'StudentGrades',
	props: {
		// 当前选中的科目
		selectedSubject: {
			type: String,
			default: '全科'
		},
		studentGradesData: {
			type: Array,
			default: () => [
				{ 
					id: 1, 
					name: '王凯', 
					avatar: '王',
					score: '400', 
					gradeRank: '5', 
					classRank: '1' 
				},
				{ 
					id: 2, 
					name: '林允儿', 
					avatar: '林',
					score: '400', 
					gradeRank: '5', 
					classRank: '1' 
				},
				{ 
					id: 3, 
					name: '王凯', 
					avatar: '王',
					score: '400', 
					gradeRank: '5', 
					classRank: '1' 
				},
				{ 
					id: 4, 
					name: '迪力热巴', 
					avatar: '迪',
					score: '400', 
					gradeRank: '5', 
					classRank: '1' 
				},
				{ 
					id: 5, 
					name: '刘涛', 
					avatar: '刘',
					score: '400', 
					gradeRank: '5', 
					classRank: '1' 
				},
				{ 
					id: 6, 
					name: '王凯', 
					avatar: '王',
					score: '400', 
					gradeRank: '5', 
					classRank: '1' 
				},
				{ 
					id: 7, 
					name: '林允儿', 
					avatar: '林',
					score: '400', 
					gradeRank: '5', 
					classRank: '1' 
				},
				{ 
					id: 8, 
					name: '王凯', 
					avatar: '王',
					score: '400', 
					gradeRank: '5', 
					classRank: '1' 
				},
				{ 
					id: 9, 
					name: '迪力热巴', 
					avatar: '迪',
					score: '400', 
					gradeRank: '5', 
					classRank: '1' 
				},
				{ 
					id: 10, 
					name: '刘涛', 
					avatar: '刘',
					score: '400', 
					gradeRank: '5', 
					classRank: '1' 
				}
			]
		}
	},
	methods: {
		handleViewGrades(student) {
			console.log('查看过往成绩:', student.name);
			this.$emit('view-grades', student);
		},
		handleViewReport(student) {
			console.log('查看成绩单:', student.name);
			this.$emit('view-report', student);
		},
		handleViewAnswerSheet(student) {
			console.log('StudentGrades - 查看答题卡:', student.name, this.selectedSubject);
			console.log('StudentGrades - 触发事件 view-answer-sheet');
			this.$emit('view-answer-sheet', student);
		}
	}
}
</script>

<style lang="less" scoped>
@primary-color: #4DD0E1;
@secondary-color: #81C784;
@text-color: #333;
@text-light: #666;
@text-lighter: #999;
@white: #fff;
@border-color: #F0F0F0;

.student-grades-card {
	background: @white;
	border-radius: 16rpx;
	padding: 24rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.08);

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;

		.card-title {
			font-size: 28rpx;
			font-weight: bold;
			color: @text-color;
		}

		.info-icon {
			width: 32rpx;
			height: 32rpx;
			border-radius: 50%;
			background: #e0e0e0;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 18rpx;
			color: @text-light;
		}
	}



	.table-header {
		display: flex;
		align-items: center;
		padding: 16rpx 0;
		border-bottom: 1rpx solid @border-color;
		margin-bottom: 12rpx;

		.header-cell {
			font-size: 24rpx;
			color: @text-light;
			font-weight: 500;
			text-align: center;

			&.name {
				flex: 1.2;
				text-align: left;
			}

			&.score {
				flex: 0.8;
			}

			&.grade-rank {
				flex: 0.8;
			}

			&.class-rank {
				flex: 0.8;
			}

			&.pass {
				flex: 0.8;
			}

			&.actions {
				flex: 1.4;

				&.single-subject {
					flex: 1.2;
				}
			}
		}
	}

	.student-list {
		.student-row {
			display: flex;
			align-items: center;
			padding: 16rpx 0;
			border-bottom: 1rpx solid #f8f8f8;

			&:last-child {
				border-bottom: none;
			}

			.student-cell {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;

				&.name {
					flex: 1.2;
					justify-content: flex-start;
					gap: 12rpx;

					.student-avatar {
						width: 48rpx;
						height: 48rpx;
						border-radius: 50%;
						background: @primary-color;
						display: flex;
						align-items: center;
						justify-content: center;
						flex-shrink: 0;

						.avatar-text {
							font-size: 20rpx;
							color: @white;
							font-weight: bold;
						}
					}

					.student-name {
						color: @text-color;
						font-weight: 500;
					}
				}

				&.score {
					flex: 0.8;

					.score-text {
						color: @text-color;
						font-weight: 500;
					}
				}

				&.grade-rank, &.class-rank {
					flex: 0.8;

					.rank-text {
						color: @text-color;
					}
				}

				&.pass {
					flex: 0.8;

					.pass-text {
						color: @primary-color;
						font-size: 22rpx;
					}
				}

				&.actions {
					flex: 1.4;
					gap: 16rpx;

					&.single-subject {
						flex: 1.2;
						justify-content: center;
					}

					.view-btn {
						color: @primary-color;
						font-size: 22rpx;
						cursor: pointer;
						transition: all 0.2s;

						&:active {
							opacity: 0.7;
						}
					}

					.report-btn {
						color: @primary-color;
						font-size: 22rpx;
						cursor: pointer;
						transition: all 0.2s;

						&:active {
							opacity: 0.7;
						}
					}

					.answer-sheet-btn {
						color: @primary-color;
						font-size: 22rpx;
						cursor: pointer;
						transition: all 0.2s;

						&:active {
							opacity: 0.7;
						}
					}
				}
			}
		}
	}
}
</style>
